<template>
  <div class="newsCenter" >
    <div v-if="noData">
      <div class="newsheader flexs">
        <div class="ico1">
          <span class="allSelect" @click.stop="choiseAll" v-if="selectAll">全选</span>
          <a v-else><span class="iconfont icon-left1 back" id="back" @click.stop="naviBack" ></span></a>
        </div>
        <p class="headerText">选择项目</p>
        <div class="ico2">
          <span class="cancel " @click.stop="cancel" v-if="selectAll" >取消</span>
          <span class="editor iconfont icon-bianji" @click.stop="modify" v-else></span>
        </div>
      </div>
      <div class="newscenterWrap">
        <div class="weui-cells weui-cells_checkbox" v-for="(item,index) in newsItem">
          <label class="weui-cell weui-check__label" :for='`s${index}`'>
            <div class="weui-cell__hd"  v-if="checked">
              <input type="checkbox"
                     class="weui-check" name="checkbox1"
                     :id='`s${index}`'
                     @change="changeStatus(index,item.id)" :checked=item.checked >
              <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
              <div class="flexs">
                <span class="dots"></span>
                <p class="systemNews">{{item.message}}</p>
                <span class="date">{{item.ctime}}</span>
              </div>
              <p>
                {{item.info}}
              </p>
            </div>
          </label>
        </div>
      </div>
      <div class="delete" @click.stop="deleteItem">
        删除
      </div>
    </div>
    <div v-else class="noData">
      <div class="newsheader flexs">
        <div class="ico1">
          <a><span class="iconfont icon-left1 back"  @click.stop="naviBack" ></span></a>
        </div>
        <p class="headerText">消息中心</p>
      </div>
      <p>
        <span>暂无数据</span>
      </p>
    </div>
    <div class="tips" v-if="tips">
      <span>{{tipsHtml}}</span>
    </div>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  export default({
    data (){
      return {
        random:1,
        objectAssign:[],
        selectAll:false,
        idStr:'',
        checked:false,
        idArray:[],
        noData:false,
        tempArray:[],
//        counts:{},
        tips:false,
        newsItem:[
//          {
//            systemNews:'系统消息1',
//            date:'9月19日',
//            info:' 尊敬的用户您好！感谢您对XXXXX的支持，你的密码现已修改完毕，之后登陆需输入修改后的密码。',
//          },
//          {
//            systemNews:'系统消息2',
//            date:'9月19日',
//            info:' 尊敬的用户您好！感谢您对XXXXX的支持，你的密码现已修改完毕，之后登陆需输入修改后的密码。',
//          },
//          {
//            systemNews:'系统消息3',
//            date:'9月19日',
//            info:' 尊敬的用户您好！感谢您对XXXXX的支持，你的密码现已修改完毕，之后登陆需输入修改后的密码。',
//          },
//          {
//            systemNews:'系统消息4',
//            date:'9月19日',
//            info:' 尊敬的用户您好！感谢您对XXXXX的支持，你的密码现已修改完毕，之后登陆需输入修改后的密码。',
//          },
//          {
//            systemNews:'系统消息5',
//            date:'9月19日',
//            info:' 尊敬的用户您好！感谢您对XXXXX的支持，你的密码现已修改完毕，之后登陆需输入修改后的密码。',
//          },
//          {
//            systemNews:'系统消息6',
//            date:'9月19日',
//            info:' 尊敬的用户您好！感谢您对XXXXX的支持，你的密码现已修改完毕，之后登陆需输入修改后的密码。',
//          }
        ],
        obj:null
      }
    },
    computed:{
      ...mapState({
        uid:state=>state.app.loginState.uid||localStorage.getItem('uid')
      })
    },
    components:{

    },
    methods:{
      changeStatus(i,id){
//          console.log(id)
//        for(var i=0;i<this.idArray.length;i++){
//            if(this.idArray.indexOf(id)>=0){
//              this.idArray.splice(i,1)
//            }else{
//              this.idArray.push(id)
//            }
//        }
        this.idArray.push(id)
        this.newsItem[i].checked  = !this.newsItem[i].checked
//        console.log(this.idArray)
      },
      naviBack(){
        this.$router.go(-1)
      },
      modify (){
        this.checked =true
        this.selectAll =true
      },
      choiseAll(){
        for(let i in this.newsItem){
          this.newsItem[i].checked =true
        }
        this.obj =Object.assign({},this.newsItem)
        this.newsItem =Object.keys(this.obj).map((key) =>this.obj[key])
        return this.newsItem
      },
      cancel (){
        this.selectAll =false
        this.checked =false
//        console.log(this.newsItem)
        for(let i in this.newsItem){
          this.newsItem[i].checked =false
        }
      },
      deleteItem (){
        let that = this
//        console.log(this.idArray)
        var arr1 =[]
        for(let i in this.newsItem){
          if(this.newsItem[i].checked){
            arr1.push(i)
          }
        }
        arr1 =arr1.map(function (value,index) {
          return value-index
        })
        arr1.forEach(function (index) {
          that.newsItem.splice(index,1)
        })
        var counts ={}
        this.idArray.forEach(function(item) {
          counts[item] = (counts[item] || 0) + 1;
        });
//        console.log(counts)
        Object.keys(counts).forEach(function(key){
            if(counts[key]%2==0){
            }else{
                that.idStr +=key+'#'
            }
        });
//      console.log(this.idStr)
        this.axios.post('/home/User/delMsg?'+`${this.baseUrl}`,{
            ids:that.idStr,
            uid:this.uid
        })
        .then((res)=>{
          that.idStr =''
          if(res.data.code==1){
          }else{
            that.tips =true
            that.tipsHtml =res.data.msg
            setTimeout(()=>{
              that.tips =false
              that.tipsHtml =''
            },1500)
//            console.log(res.data.msg)
          }
        }).catch((res)=>{
          that.tips =true
          that.tipsHtml =res.data.msg
          setTimeout(()=>{
            that.tips =false
            that.tipsHtml =''
          },1500)
//            console.log(res.data.msg)
        })
      },
      initData(){
        this.axios.get('/home/User/getUserMsg?'+`${this.baseUrl}`,{
            params:{
                uid:this.uid
            }
        })
          .then((res)=>{
//            console.log(res.data.data)
            if(res.data.data.length>0){
              this.noData =true
              this.newsItem.push(...res.data.data)
//              console.log(this.newsItem)
            }

          })
      }

    },
    mounted(){
        this.initData()
      this.newsItem.map((item)=>{
        item.checked =false
      })
    }
  })
</script>
<style scoped="">
  .newsCenter{
    background: #fff;
  }

  .flexs{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .flex1{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
  }
  .newsheader{
    padding: 0 0.32rem;
    height: 0.8rem;
    line-height: 0.8rem;
    justify-content: space-around;
    background: #e83329;
  }
  .newsheader span{
    color: white;
  }

  .newsheader .headerText{
    font-size: 0.32rem;
    color: white;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    text-align: center;
  }

  .newsheader .iconfont{
    font-size :0.36rem;
    color:white;
    width: 0.5rem;
  }
  .newscenterWrap {
    position: absolute;
    top: 0.8rem;
    bottom: 0.8rem;
    background: #f6f6f6;
    overflow: scroll;
    width: 100%;
  }
  .delete {
    position: fixed;
    left: 0;
    right: 0;
    max-width: 750px;
    bottom: 0;
    width: 100%;
    height: 0.8rem;
    background: #e83329;
    line-height: 0.8rem;
    font-size: 0.32rem;
    color: white;
    text-align: center;
    z-index: 999;
    margin: 0 auto;
  }
  .newscenterWrap{
    position: absolute;
    top:0.8rem;
    bottom: 0.8rem;
    background: #f6f6f6;
    overflow: scroll;
    width: 100%;
  }
  .choiseItem{
    background: white;
  }
  .weui-cell__bd .flexs{
    /*height: 0.4rem;*/
    line-height: 0.4rem;
  }
  .flexs .dots{
    width: 0.24rem;
    height: 0.24rem;
    background: #fe6e67;
    border-radius:50% ;
    margin-right: 0.3rem;
  }
  .flexs .systemNews{
    font-size: 0.3rem;
    color: #4d4c4c;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1

  }
  .weui-cell{
    padding: 10px 0.32rem;
  }
  .flexs .date{
    font-size: 0.24rem;

  }
  .weui-cell__bd>p{
    font-size:0.28rem ;
    color: #b0afaf;
    line-height: 1.3;
    padding: 0.1rem 0;
    text-align: justify;
  }
  .weui-cells_checkbox .weui-check:checked+.weui-icon-checked:before{
    color: #e83329;
  }
  .weui-cells{
    margin-bottom: 0.15rem;
    margin-top: 0;
  }
  .newscenterWrapItem{
    margin-top: 0.36rem;
  }
  .weui-cells_checkbox .weui-cell__bd{
    width: 100%;
  }
  .noData>p{
    position: absolute;
    left: 0;
    top:0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;

  }
  .noData p span{
    position: relative;
    z-index: 1;
  }
  .noData p span:after{
    position: absolute;
    content: '';
    left:-3rem;
    top:50%;
    width: 2.5rem;
    height: 1px;
    background: #ccc;
    z-index: -1;
  }
  .noData p span:before{
    position: absolute;
    content: '';
    right:-3rem;
    top:50%;
    width: 2.5rem;
    height: 1px;
    z-index: -1;
    background: #ccc;
  }
  .tips{
    position:fixed;
    left:50%;
    top:50%;
    padding: 0 0.3rem;
    min-width:2rem;
    max-width:80%;
    text-align:center;
    font-size:.28rem;
    color:#fff;
    background:rgba(0,0,0,.8);
    border-radius:.1rem;
    -webkit-transition:all .25s ease 0s;
    transition:all .25s ease 0s;
    -webkit-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    height: 0.8rem;
    line-height: 0.8rem;
  }
</style>
